<template>
    <div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%;padding-top: 8px"
        >
            <el-table-column
                    prop="id"
                    label="序号"
            />
            <el-table-column
                    prop="name"
                    label="区域名称"
            />
            <el-table-column
                    prop="proDate"
                    label="生产日期"
            />
            <el-table-column
                    prop="use"
                    label="用电量(kWh)"
            />
            <el-table-column
                    prop="li"
                    label="生产粒数"
            />
            <el-table-column
                    prop="avgUse"
                    label="平均用电量(度/粒)"
            />
            <el-table-column
                    prop="unitUse"
                    label="单位用电量(度/粒)"
            />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleClick(scope.$index, scope.row)" style="background-color: #00a854">查看</el-button>
                    <!--          <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <!--          <el-button type="danger" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    background
                    :current-page="1"
                    :page-size="pagesize"
                    :total="tableData.length"
                    layout="prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="50%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="客户名称">
                    <el-input v-model="form.customer"/>
                </el-form-item>
                <el-form-item label="告警监测点">
                    <el-input v-model="form.AlarmPoint"/>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"/>
                </el-form-item>
                <el-form-item label="告警设备">
                    <el-input v-model="form.device"/>
                </el-form-item>
                <el-form-item label="当前值">
                    <el-input v-model="form.value"/>
                </el-form-item>
                <el-form-item label="动作时间">
                    <el-input v-model="form.operationTiem"/>
                </el-form-item>
                <el-form-item label="恢复时间">
                    <el-input v-model="form.recoveryTiem"/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.describe" type="textarea"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="warning" @click="saveEdit">远程消音并确认</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 编辑 end -->

        <!-- 查看 -->
        <el-dialog title="查看详情" :visible.sync="showVisible" width="50%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="区域名称">
                    <el-input v-model="form.customer" :disabled="true"/>
                </el-form-item>
                <el-form-item label="生产日期">
                    <el-input v-model="form.AlarmPoint" :disabled="true"/>
                </el-form-item>
                <el-form-item label="用电量(kWh)">
                    <el-input v-model="form.address" :disabled="true"/>
                </el-form-item>
                <el-form-item label="生产粒度">
                    <el-input v-model="form.device" :disabled="true"/>
                </el-form-item>
                <el-form-item label="平均用电量">
                    <el-input v-model="form.value" :disabled="true"/>
                </el-form-item>
                <el-form-item label="单位用电量">
                    <el-input v-model="form.operationTiem" :disabled="true"/>
                </el-form-item>
          <!--      <el-form-item label="恢复时间">
                    <el-input v-model="form.recoveryTiem" :disabled="true"/>
                </el-form-item>-->
                <el-form-item label="描述">
                    <el-input v-model="form.describe" type="textarea" :disabled="true"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="showVisible = false">取 消</el-button>
        <el-button type="primary" @click="showVisible = false">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 查看 end -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }, {
                    id: '01',
                    name: 'A栋-车间2',
                    use: 1200,
                    avgUse: 0.050,
                    unitUse: 0.020,
                    proDate: 2020 - 4 - 20,
                    li: 24000
                }],
                editVisible: false,
                showVisible: false,
                form: {}
            }
        },
        methods: {
            // 编辑操作
            handleEdit(index, row) {
                this.idx = index
                this.form = row
                this.editVisible = true
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false
                this.$message.success(`修改第 ${this.idx + 1} 行成功`)
                this.$set(this.tableData, this.idx, this.form)
            },
            // 查看操作
            handleClick(index, row) {
                this.idx = index
                this.form = row
                this.showVisible = true
            },
            // 删除
            deleteRow(index, rows) {
                this.open(index, rows)
            },
            open(index, rows) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    rows.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            }
        }
    }
</script>
<style>
    .el-dialog__header {
        padding: 10px 20px 10px;
        background: linear-gradient(0deg, rgba(25, 145, 235, 1) 0%, rgba(46, 161, 248, 1) 100%) !important;
    }

    .el-dialog__title {
        line-height: 24px;
        font-size: 16px;
        color: #fff;
    }

    .el-dialog__headerbtn .el-dialog__close {
        color: #f5f7fa;
    }

    .el-dialog__headerbtn {
        top: .9375rem
    }

    .el-dialog__body {
        padding: 20px 20px 10px 20px;
    }
</style>
